<template>
    <div>
        <div v-title>提现明细</div>
        <van-loading type="spinner" color="black" style="margin:54px auto" v-show="showLoading" />
        <div class="main">
            <ul v-waterfall-lower="loadMore" waterfall-disabled="disabled" waterfall-offset="100" v-show="!showLoading">
                <div v-for="item in datalist">
                    <div><div style="width:80%;float:left" v-if="item.StatusID==2">+{{item.ApplyAmount.toFixed(2)}}</div>
                    <div style="width:80%;float:left" v-else>-{{item.ApplyAmount.toFixed(2)}}</div>
                        <span v-show="item.StatusID==0">未操作</span>
                        <span style="color:#f13c3c" v-show="item.StatusID==2">财务驳回</span>
                        <span v-show="item.StatusID==1&&item.IsRemittance==0">未打款</span>
                        <span v-show="item.StatusID==1&&item.IsRemittance==1">已打款</span>
                    </div>
                    <div class="time" style="">{{item.ApplyTime}}</div>
                </div>
            </ul>
        </div>
        <div class="nodata" v-show="this.showtime==0">
            <img src="../image/nodata.png">
        </div>
    </div>
</template>
<script>
import api from '../fetch/api.js';
import {
    Toast,
    Dialog,
    Waterfall,
    Loading,
} from 'vant';
export default {
    components: {
        [Toast.name]: Toast,
        [Dialog.name]: Dialog,
        [Loading.name]: Loading,
    },
    directives: {
        WaterfallLower: Waterfall('lower'),
    },
    data() {
        return {
            datalist: '',
            pages: 1,
            showtime: '',
            showLoading: true,
        }
    },
    mounted() {
        this.GetWithdrawalListByPage()
    },
    methods: {
        GetWithdrawalListByPage() {
            api.Post('Member/MemberInfo/GetWithdrawalListByPage', {Type: -1, StatusID: -1, IsRemittance: -1}).then(res => {
                this.datalist = res.rows
                this.showtime = res.total
                this.showLoading = false
            })
        },
        //加载更多
        loadMore() {
            this.disabled = true;
            if (this.pages * 10 >= this.showtime) {
                // Toast({ message:'没有更多数据啦~', position: 'top' });
                this.disabled = false;
                return;
            }
            this.pages++;
            api.Post('Member/MemberInfo/GetWithdrawalListByPage', { rows: 10, page: this.pages,Type: -1, StatusID: -1, IsRemittance: -1 }).then(res => {
                setTimeout(() => {
                    for (var i = 0; i < res.rows.length; i++) {
                        this.datalist.push({
                            ApplyAmount: res.rows[i].ApplyAmount,
                            IsRemittanceName: res.rows[i].IsRemittanceName,
                            ApplyTime: res.rows[i].ApplyTime,
                            StatusID: res.rows[i].StatusID,
                            IsRemittance: res.rows[i].IsRemittance,
                        })
                    }
                });
                this.disabled = false;
            }, 200)
        },

    },

}
</script>

<style scoped>
.main {
    background: #fff
}

.main>ul>div {
    width: 88%;
    margin: 0px auto;
    font-size: 14px;
    line-height: 20px;
    border-bottom: 1px solid #f0f1f5;
    padding: 12px 0px;
}

.main>ul>div :first-child {
    color: #333333;
    font-size: 14px;
}

.main>ul>div :first-child span {
    float: right;
    padding-top: 10px;
}

.main>ul>div:last-child {
    font-size: 12px;
    color: #999999;
}

.time {
    margin-top: 2px;
    font-size: 12px;
    color: #999999;
}

.nodata {
    text-align: center;
    padding: 50px;
    margin-top: 20vw;
}

.nodata img {
    width: 45%;
}
</style>
